<template>
  <s-page>
    <view class="container">
      <s-row vertical :gutter="20">
        <s-col><s-button block @click="visible1 = true">基础用法</s-button></s-col>
        <s-col><s-button block @click="visible2 = true">标题信息</s-button></s-col>
        <s-col><s-button block @click="visible3 = true">描述信息</s-button></s-col>
        <s-col><s-button block @click="visible4 = true">不显示取消按钮</s-button></s-col>
        <s-col><s-button block @click="visible5 = true">禁用选项</s-button></s-col>
        <s-col><s-button block @click="visible6 = true">颜色定制</s-button></s-col>
        <s-col><s-button block @click="visible7 = true">图标</s-button></s-col>
      </s-row>
    </view>
    <!-- 基础用法 -->
    <s-action-sheet v-model="visible1" :actions="actions" @select="onSelect" @cancel="onCancel" />
    <!-- 标题 -->
    <s-action-sheet v-model="visible2" :actions="actions" title="标题" />
    <!-- 描述信息 -->
    <s-action-sheet v-model="visible3" :actions="actions2" description="这是一段描述信息" />
    <!-- 不显示取消按钮 -->
    <s-action-sheet v-model="visible4" :actions="actions" :show-cancel="false" />
    <!-- 禁用选项 -->
    <s-action-sheet v-model="visible5" :actions="actions3" />
    <!-- 颜色定制 -->
    <s-action-sheet v-model="visible6" :actions="actions4" description="您确定退出吗？" />
    <!-- 图标 -->
    <s-action-sheet v-model="visible7" :actions="actions5" />
  </s-page>
</template>

<script>
export default {
  data: () => ({
    visible1: false,
    visible2: false,
    visible3: false,
    visible4: false,
    visible5: false,
    visible6: false,
    visible7: false,
    actions: [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三' },
    ],
    actions2: [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三', subname: '描述信息' },
    ],
    actions3: [
      { name: '选项一' },
      { name: '选项二', disabled: true },
      { name: '选项三' },
    ],
    actions4: [
      { name: '确定', color: 'red' },
    ],
    actions5: [
      { name: '选项一', icon: 'friends-o' },
      { name: '选项二', icon: 'phone-o' },
      { name: '选项三', icon: 'comment-o' },
    ],
  }),
  methods: {
    onSelect(index) {
      uni.showToast(`当前选中项索引为：${index}`);
    },
    onCancel() {
      console.log('取消选择');
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: $padding-md;
}
</style>
